
const options = {
    data(){
        return {
            products: [
                { id: 1234 , name: 'Vue从入门到放弃' , price: 98 , number: 1 },
                { id: 2345 , name: '哈尔冰红肠' , price: 28 , number: 1 },
                { id: 1122 , name: 'SpringBoot从没入门到放弃' , price: 88 , number: 1 },
                { id: 3344 , name: '雪花啤酒(勇闯天涯)' , price: 60 , number: 1 }
            ]
        }
    },
    methods: {
        handleReduce(id){
            console.log( 'handleReduce: ' , id );
            // 根据商品编号从数组中查找指定的商品
            let product = this.products.find( p => p.id == id );
            // 若 product 存在则为 true
            if( product ) {
                if( product.number > 1 ) {
                    product.number-- ;
                }
            }
        },
        handleIncrease(id){
            console.log( 'handleIncrease: ' , id );
            // 根据商品编号从数组中查找指定的商品
            let product = this.products.find( p => p.id == id );
            // 若 product 存在则为 true
            if( product ) {
                product.number++ ;
            }
        }
    },
    computed: {
        total(){
            let t = 0 ;
            this.products.forEach( p => { 
                t += p.price * p.number ;
            } );
            return t ;
        }
    }
}

const app = Vue.createApp( options );

// 定义组件
const cartItem = {
    props: [ 'product' ] ,
    template: `<div class="cart-item">
                 <span class="id">{{ product.id }}</span>
                 <span class="name">{{ product.name }}</span>
                 <span class="price">{{ product.price }}</span>
                 <span class="number">
                    <!-- 注意: 调用组件本身的函数时可以传递参数 -->
                    <a v-on:click="reduce(product.id)">-</a>
                    {{ product.number }}
                    <a v-on:click="increase(product.id)">+</a>
                 </span>
                 <span class="subtotal">{{ product.price * product.number }}</span>
               </div>`,
    methods: {
        reduce( id ){
            console.log("触发自定义事件: reduce , 接受到的参数值是: " , id);
            // this.$emit( 自定义事件名称 , 参数 );
            this.$emit( "reduce" , id );
        },
        increase( id ){
            console.log("触发自定义事件: increase , 接受到的参数值是: " , id);
            this.$emit( "increase" , id );
        }
    }
}

// 注册组件
app.component( 'cart-item' , cartItem );

app.component( 'total' , {
    // 在指定 property 名称时 "total-price" 需要书写为 totalPrice
    props: [ 'totalPrice' ],
    template: `<div class="total-wrapper">
                <!-- 在自己的模板中使用property时用 totalPrice 即可 -->
                <span class="total">{{totalPrice}}</span>
               </div>`
});

const vm = app.mount( "#cart" );

console.log( vm );